<template>
  <div class="container wallet">
    <Header />
    <div class="main">
      <h2>{{$t("wallet.wallet")}}</h2>
      <div class="amount">
          <div>
              <p>
                  {{$t("wallet.asset")}}
                  <img @click="showAmount=!showAmount" src="../../assets/img/open_eye.png" alt="" v-if="showAmount">
                  <img @click="showAmount=!showAmount" src="../../assets/img/close_eye.png" alt="" v-else>
              </p>
              <span>12.0000WSC</span>
              <i>≈234.00CNY</i>
          </div>
          <div @click="$router.push('/exchange')">
              <img src="../../assets/img/exchange.png" alt="">
              {{$t("wallet.turn")}}
          </div>
      </div>
      <div class="record">
        <div>
          <h3>{{$t("wallet.record")}}</h3>
          <img src="../../assets/img/menu.png" alt="" @click="()=>{this.show=true}">
        </div>
        <ul>
          <li v-for="(record,i) in records" :key="i">
              <div>
                  <span>{{$t("wallet.exchange")}}</span>
                  <p>
                      <span>WSC007</span>
                      <img src="../../assets/img/turn.png" alt="">
                      <span>{{$t("wallet.wallet")}}</span>
                  </p>
              </div>
              <div v-for="(item,index) in recordInfo" :key="index">
                  <span>{{item.title}}</span>
                  <p>{{item.info}}</p>
              </div>
          </li>
        </ul>
      </div>
    </div>
    <Select :show="show" @hide="toggleSelect" :list="list" @selectUpdate="selectUpdate" />
  </div>
</template>

<script>
import Header from "./Header.vue";
import Select from '../../components/Select.vue';
export default {
  components: {
    Header,
    Select
  },
  data(){
      return{
          records:['',''],
          show: false,
          ind:0,
          showAmount:true
      }
  },
  computed:{
      recordInfo(){
          return[
              {title:this.$t("wallet.amount"),info:'12.0000 WSC'},
              {title:this.$t("wallet.orderNo"),info:'20191107075916400'},
              {title:this.$t("wallet.time"),info:'2019-11-7 7:59:16'},
              {title:this.$t("wallet.state"),info:this.$t("wallet.state1")}
          ]
      },
      list() {
          return [
          {
            title: this.$t("wallet.all"),
            type:"all",
            chked: this.ind===0 ? true :false,
            /* selectUrl: "getBonusTransferBalanceRecord",
            type:"bonusTransfer",
            info:{
              num:"totalChange",
              type:"succ",
              time:"changeDate",
              detail:"/rewarddetail",
              i18n:"fdlog.reward"
            } */
          },
          {
            title: this.$t("wallet.turnIn"),
            type:"turnIn",
            chked: this.ind===1 ? true :false,
            /* selectUrl: "getBonusTransferBalanceRecord",
            type:"bonusTransfer",
            info:{
              num:"totalChange",
              type:"succ",
              time:"changeDate",
              detail:"/rewarddetail",
              i18n:"fdlog.reward"
            } */
          },
          {
            title: this.$t("wallet.turnOut"),
            type:"turnOut",
            chked: this.ind===2 ? true :false,
            /* selectUrl: "getTransferRecordIn",
            type:"turnIn",
            info:{
              num:"amout",
              type:"orderStatus",
              time:"updateDate",
              detail:"/transferdetail",
              i18n:"fdlog.transfer",
              transferType:"turnIn"
            } */
          },
          {
            title: this.$t("wallet.cancel"),
            chked: true,
            type: "cancel"
          }
        ];
      
    },
  },
  methods:{
    toggleSelect() {
      this.show = !this.show;
    },
    // select更新
    selectUpdate(ind){
      this.ind = ind;
    //   this.record = [];
    //   this.getRecord();
    },
  }
};
</script>

<style lang="scss" scoped>
.wallet{
  position: relative;
  .main {
    color: #fff;
    h2 {
      font-size: 0.167rem;
      padding: 0 0.15rem;
    }
    .amount {
      margin: 0.2rem 0.15rem;
      height: 1.31rem;
      box-sizing: border-box;
      border-radius: 0.067rem;
      padding: 0.15rem 0.2rem;
      background: url('../../assets/img/wallet_bg.png') no-repeat;
      background-size: 100% 100%;
      position: relative;
      >div:nth-of-type(1){
          display: flex;
          flex-direction: column;
          p{
              font-size: .12rem;
              img{
                  width: .12rem;
                  margin-left: .05rem;
              }
          }
          span{
              line-height: 2;
              font-size: .17rem;
          }
          i{
              color: #7B8FB3;
          }
      }
      >div:nth-of-type(2){
          text-align: center;
          font-size: .12rem;
          position: absolute;
          bottom: 0;
          height: .4rem;
          left: 0;
          right: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          img{
              height: .09rem;
              width: .12rem;
              margin-right: .05rem;
          }
      }
    }
    .record {
        >div{
            display: flex;
            justify-content: space-between;
            border-bottom: solid .067rem #293946;
            padding: 0.07rem .15rem;
            img{
                height: .18rem;
                width: .18rem;
            }
            h3{
                font-size: .15rem;
            }
        }
        >ul{
            li{
                margin: 0 .15rem;
                padding: .15rem 0;
                border-bottom: solid .01rem #466177;
                >div{
                    font-size: .12rem;
                    display: flex;
                    margin: .1rem 0;
                    img{
                        height: .08rem;
                        width: .1rem;
                    }
                    >span{
                        color: #44647F;
                        // margin-right: .3rem;
                        width: 20%;
                    }
                    p{
                        color: #CDD7E9;
                        flex: 1;
                        >img{
                            margin: 0 .53rem;
                        }
                    }
                }
            }
            >li:nth-last-of-type(1){
                border: none;
            }
        }
    }
  }
}
</style>